<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in liveData" :key="index" @tap="openinfo" :data-uid="item.uid">
        <view class="uni-media-list">
          <!-- <image class="uni-media-list-logo" :src="item.user_cover"></image> -->
		  <view class="uname">{{ item.uname }}</view>
		  <view class="follownum">{{ item.follower_num }}粉丝</view>
		  <view class="medal">粉丝牌：{{ item.medal_name }}</view>
          <view class="uni-media-list-body">
            <view class="live_title">{{ item.title }}</view>
            <view class="live_status">
              直播状态：{{ item.live_status === 1 ? '正在直播' : '未开播' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
	import liveDataJson from '@/data/data.json'
	
	export default {
		name: 'PP',
		data() {
			return {
			    liveData: [] // 使用 liveData 存储新闻列表
			};
		},
		async mounted() {
		    // 动态导入外部脚本，确保只在需要时加载
		    const { runExternalScript } = await import('@/js/updateInfo.js');
		    this.startPeriodicScript(runExternalScript);
		  },
		beforeDestroy() {
			// 确保在组件销毁前清除定时器，防止内存泄漏
		    if (this.intervalId) {
		      clearInterval(this.intervalId);
		    }
		},
		onLoad:function(){
			uni.showLoading({
				title: "Loading..."
			})
			// 使用本地JSON数据代替网络请求
			this.liveData = liveDataJson;
			uni.hideLoading();
		},
		methods: {
			startPeriodicScript(runScript) {
			    // 设置定时器，例如每5秒执行一次
			    this.intervalId = setInterval(() => {
			        runScript(); // 执行外部脚本中的函数
			    }, 1000); // 目前设定默认1000ms，可更改
			},
			openinfo(e) {
				var uid = e.currentTarget.dataset.uid ;
				uni.navigateTo({
					url: '../info/info?uid='+uid
				});
			}
		},
	}
</script>

<style>
.uni-medea-list-body{
	height: auto;
}
.uni-media-list-text-top{
	line-height: 1.6em;
}
.uname {
	font-weight: bold;
    color: hotpink; 
    font-size: 2em; 
}
.live_status{
	color: red; 
	font-size: 1.6em; 
}
.live_title{
	color: skyblue;
	font-size: 1.6em; 
}
.follownum{
	color: yellowgreen;
	font-size: 1.4em; 
}
.medal{
	color: orange;
	font-size: 1.4em; 
}
</style>
